<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>获取可视区域宽高</h1>
		<p>window.innerWidth-------ie9 以下不支持</p>
		<hr />
		<p>ie9以下</p>
		<p>标准模式下----------document.documentElement.clientWidth</p>
		<p>怪异模式下----------document.body.clientWidth</p>
	</body>
</html>
<script type="text/javascript">
	window.onresize = function(){
		console.log(getView().w + '-' +getView().h)
	}
	
	function getView(){
		if (window.innerWidth) {
			console.log('ie9以上')
			return {
				w: window.innerWidth,
				h: window.innerHeight
			}
		} else{
			if ( document.compatMode === 'BackCompat') {
				console.log('怪异模式')
				return {
					w: document.body.clientWidth,
					h: document.body.clientHeight
				}
			} else{
				console.log('标准模式')
				return {
					w: document.documentElement.clientWidth,
					h: document.documentElement.clientHeight
				}
			}			
		}
	}
	console.log(getView().w + '-' +getView().h)
</script>